A Basic Introduction to Typography 


What is Typography? 


Typography is an art form that has been around for hundreds of years. 
Words and text are all around us every day in almost everything we do. 
In every piece of type you see, somebody has considered how the 
letters, sentences and paragraphs will look in order for it to be read by 
us, or make us feel a certain way when we look at it. 


Sometimes this is done well, sometimes not. Often it is graphic 
designers who are the ones deciding how it will look; in brochures, 
logos, websites and so on. The better we are at this, the more effective 
our designs will be. 


Good typography comes from paying attention to tiny details. This 
can make the difference between work that is average or work that is 
really good. 


Typographic Basics... typeface or font? 


Designers are often unsure of the difference between these two, as 
they are often confused for being the same thing... 


typeface font 


a set of fonts in the 


a single weight or style 
same style. a font family. 


within a typeface family. 
Arial Narrow 
Arial Arial Rounded Bold 
Arial Black 
, Times New Roman Regular 
Times New Roman 


Times New Roman Italic 
Times New Roman Semi Bold 


l Century Gothic 
Century Gothic Century Gothic Bold 


Typographic Basics... classification 


There are many different classifications of typefaces, but the most 
common two types are: 


Serif -these typefaces are the more traditional ones. “Serifs” are 
the little feet or arms that hang off the end of letter strokes, and typically 
add a thick/thin look to the letter. Serif fonts are considered the easiest 
fonts to read so they are most often used as text or “body” copy. 


Sans-serif — as the name suggests, sans saerif fonts are 
“without serifs” and usually have an overall even stroke weight. 

Sans serif fonts can evoke a more modern look because they were 

not created until the 19th century. While they can also be harder to 
read, they are often used only for small amounts of copy, subheadings, 
or large headlines. Helvetica is the most universal sans serif font as 

it is used around the world. 


Typographic Basics... serif vs. sans-serif 


Now, how do you decide which one to work with for your project? 


serif or sans-serif? 


Baskerville 
Clarendon 
Garamond 
Georgia 
TRAJAN 


Arial 
Futura 
Impact 
Myriad 
Tahoma 


Typographic Basics... serif vs. sans-serif 


Start out by considering Serif fonts as "fancy" fonts. Those little 
embellishments on every letter are just that - embellishments. 

Serif fonts can be associated with words like classy, refined, expensive. 
lf those words also describe who your target audience is, then this is 
the type of font you should choose. 


Serif fonts are: REFINED fancy elegent 
expensive classy 


Times New Roman: is the standard for all written articles 
because it the most common font found in newspapers. 
News is associated with importance and seriousness — 
so the font Times New Roman became associated with 
intelligence and seriousness, and conveys the feeling that 
the news or article you are reading is important! 


Typographic Basics... serif vs. sans-serif 


Sans-Serif fonts come without these embellishments so they tend to 
get associated with words like clean, modern, straightforward, 

and sometimes (although not always) inexpensive — If you want a font 
that is going to speak to the subconscious of the general public and 
make them feel comfortable instantly, than use a sans-serif font. 


Sans-serif fonts are: clean modem minimalist 


straightforward fresh 


Masthead: The title going across the front of 

a magazine is called a masthead. The next time 

you are standing in front of a magazine rack, take 

a look at the fonts used for the covers on display. 

You can usually tell the target audience just by 

looking at the font used for the masthead. 

Magazines that use a sans-serif font are clear, soi OGL EERE ivre 
inviting and universal to the general public. 7 GARI SN | m 7 
However, ones that are more news-oriented, y L4 i ; 
sophisticated or political will most likely use a 

serif font for the masthead. 


Typographic Basics... other styles of fonts 


decorative 

Decorative fonts are designed to be used for attention-getting headlines. 
They should rarely be used as body copy fonts. When designing, it is 
best to limit your use to only one decorative font. 


Las egas Castaway MESQUITE 
LIVING HELL Jerser PORTOCALL 
kiddiez Fiesa ROSEWO 


Typographic Basics... other styles of fonts 


script 

Script fonts are designed to mimic handwriting, therefore the letters 
often touch one another. There is both traditional and modern styles 
of script. Script fonts should never be used in all capital letters. 


Jtadewm 


‘@plit 


Rocket 


Typographic Basics... other styles of fonts 


handwriting 


Handwriting fonts are designed to look like they were hand written. 
These can range from a fancy adult script, to a child’s scribble. 


Angelina chi d ren 


Spnllbbte 


peas comic sans 
SPEI SUL CARTOONS 


Baby Face 


Typographic Basics... other styles of fonts 


dingbats 


Dingbats are symbols that are small pieces of art used to enhance 

the design of the text or page. While Zapf Dingbats and Wingdings 

are the most common dingbats, there are hundreds, if not thousands, 
of different designs available. They are usually packaged with a specific 
font, and tend to mimic their style. 


KSOVULIBA [ |aO+ O X i 
LOOK! = FREE: aM IPI oR 
Fitek DODO 


Typographic Basics... font sizes 


sizes 


Fonts come in many different sizes, and use a system of measurement 
called points. Computers use 72 points to equal one inch. Two different 
font designs at the same point size may actually have different physical 
sizes. The correct size for a font depends on how it’s being used. The 
body copy is generally 9-12 points depending on the font used, the 
audience, and the size of the material. A printed letter page may use 

a 12 pt, but a presentation on screen may need a larger size like 24 pt. 


so 10 1 2 14 18 21 24 36 48 60 [2 


84 96 200 


It’s the little things that matter most... 


The difference between “just okay” typography and professional 
level typography is usually in the details. Many times, simply typing 
in the text and formatting the font, size and line spacing is enough. 
However, depending on the design, some extra attention may be 
needed. Larger type sizes may need adjustments to the space 
between the characters, and paragraphs need to be adjusted to 
eliminate “widows” and “orphans.” 


Character & word spacing Paragraph spacing 
kerning alignment 
tracking line breaks & rag 
hyphens 


Line spacing widows &orphans 
leading 


Typographic Basics... character spacing 


kerning 


Kerning is the space between each character or letter. Sometimes 
this space needs to be adjusted in order to create a more pleasing 
look to the text. Most programs apply kerning automatically, but there 
are certain letter combinations that may require manual kerning. 


type looks better with kerning! 


Watermelon 
Watermelon 


No Kerning 


Automatic Kerning 


Manually Adjusted 


Typographic Basics... word spacing 


tracking 


The adjustment of word spacing is called tracking. It is similar to 
kerning but refers to the space between words instead of characters. 
Its main purpose is to make type fit a required space without altering 
the type size or line spacing. Tracking can be either negative (making 
the words closer together) or positive (making the words farther apart) 


Tackingat400 TRACKING IS A DESIGN TOOL 
Tracking at 100 TRACKING IS A DESIGN TOOL 
Tracking ato TRACKING IS A DESIGN TOOL 
Tracking at-50 TRACKING IS A DESIGN TOOL 
Tracking at-100 TRACKING IS A DESIGN TOOL 


Typographic Basics... line spacing 


leading 

Leading, or line spacing, refers to the amount of space between lines 
of type. The amount of leading you use will be determined based on 

the font used, the line length, and the size of the type. The larger the 


type, the more leading you will need. 
24/36 
nae this is an example of 
this is an example of 
size 24 type with a size 24 type with a 
leading of 24 pt. leading of 36 pt. 


36 / 24 
24/24 


this iş an example of this is an example of 
eading BOP S4 p 4 pt. size 36 type with a 


leading of 36 pt. 


Typographic Basics... paragraph spacing 
alignment 


Alignment refers to the way the lines of text flow on a page. Most 
text is aligned left, as this is how we are used to reading it. In some 
cases, we may want to used other alignments in order to add to the 
design quality of a project. 


align left align center 


This text is aligned left This text is centered 
so that the sentences so that the sentences 
always line up on the always line up on 
left side top of one another 


oo justified 
align right This text is justified 
This text is aligned right so that there is a 
so that the sentences straight edge on 
always line up on the both sides. In order 
right side to do this you will 

have to use tracking 


Typographic Basics... paragraph spacing 


line breaks & rag 


In typography, “rag” refers to the irregular or uneven vertical margin 

of a block of type. Usually it’s the right margin that’s ragged but either 

or both margins can be ragged. Pay attention to the shape that the 
ragged line endings make. A good rag goes in and out from line to line 

in small increments. A poor rag creates distracting shapes of white space 
in the margin. Don’t rely on the line breaks generated by your software 
application; get in the habit of spotting and correcting poor rags by 
making manual line breaks or by editing your copy. 


good rag bad rag good rag 


Lorem ipsum dolor st amet J Lorem ipsum dolor sit amet 

x consectetur adipiscing elit consectetur adipiscing elit 
Jones eletlend tortor a mph 

Orta iaculis, Sec egue 


Donec eleifend tortor a nibh 


Typographic Basics... paragraph spacing 


hyphens 


Hyphenated words are sometimes considered a necessary evil in 
typography, but proper hyphenation allows for a better-looking, 
tighter rag — or, in the case of justified type, a more natural, even 
text color. Hyphenation also allows more words to fit in a line, 
which saves space. 


e Don’t have more than two hyphenations in a row. 
e Don’t have too many hyphenated line endings in a single paragraph 
e Check the “rag” (the right edge of the text) for any glaring holes, or words that “stick out” 


e In justified text, check that the text looks natural, with an even, readable color and texture. 
Avoid spacing that looks squeezed or stretched. 


Typographic Basics... paragraph spacing 


widows & orphans 


If a single word or very short line is left at the end of a column it is 
called a Widow. If the same is left at the top of the following column 
this is called an Orphan. Both of these are considered bad typography 
as they cause distracting shapes in a block of type. They can usually 
be fixed easily in the same way as the rag, by reworking the line breaks 
in the column or by editing the copy. 


Lorem ipsum dobor s aml Lorem ipaum dobor sil amet Lorem ieum calor sit amet pum 
comochclin adipacing li goiania achipiscing oil comer Geto adipisi clit Lorem ipsam dolor sit amet 
Loner eleilend boror a mbh Dormer ebeibeimd tortor a nibh Donte ebtibemd tomer a nibh 
pona iule. Sed cf neque porta aculis. ed ef neque Huta aculis, Sed et neque 
inp. Fusce eb bond lirph. Pate al barbed upi. Paste ai oe 

neque. quis. lempus lorem neque. quis. bempus borem. negue, quis tempas borem. 
Sol PDT iine al amil Dal in Te A aiil Sal Aro ie Sal etter 
mbh voluipal viren nibh volubpaii viver nibh vHubpai vic. 
Curabitur cect eros sed gral CUPSEUr Ciel tru seal uraniu Ciel Ems sed orl 
peti convallis at ci amm pretiom coivallis [veto 2oivallis ae eu 
Eum. 


Cheese hig deli presi Ip i lil 
Poner eleilend tortor a mbh 
pala jatii, Sed ef egiie 
turpi. Fusce ci boriw 

ne gue. gus tempus. lorem 
Sod mainii mane sii Ame 
nibh voluipal viverra 


Widow Orphan 


Typographic Basics... is that it? 


You will find that you will be able to communicate your message more 
effectively when you take the time to select the right typeface, and 
make all the small adjustments needed. 


typography humor 


— 


I shot the serif. 


